<template>
  <div class="app">
    <el-config-provider :locale="langUrl()">
      <!-- vue3.0配置 -->
      <router-view v-slot="{ Component }">
        <keep-alive :include="includeList">
          <component :is="Component" />
        </keep-alive>
      </router-view>
    </el-config-provider>
  </div>
</template>
<script setup>
import { ref } from '@vue/runtime-core'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex' 

const store = useStore()
const router = useRouter()
const includeList = ref([])

const langUrl = () => {
  return store.state.apps.language == 'zh-cn' || localStorage.getItem('language') == 'zh-cn'  ? window.ElementLang.zhCn : window.ElementLang.en
} 
includeList.value = store.state.kepalive.keepAlives
router.beforeEach((to, from, next) => {
  if (includeList.value?.length) {
    includeList.value.forEach((element) => {
      if (!to.path.includes(element)) {
        includeList.value = []
        store.dispatch('kepalive/changeKeepalive', includeList.value)
        return
      }
    })
  }
  if (to.meta.keepAlive && includeList.value.indexOf(to.name) === -1) {
    includeList.value.push(to.name)
    store.dispatch('kepalive/changeKeepalive', includeList.value)
  }
  next()
})
</script>
<style lang="scss" scoped> 
</style>
